<template>
  <el-row class="container-box">
    <el-form  ref="form" label-width="80px">
        <el-form-item label="用户名">
            <el-input v-model="name" placeholder="请输入新的用户昵称"></el-input>
        </el-form-item>


        <el-form-item class="save-btn">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
    </el-form>
  </el-row> 
</template>

<script type="text/ecmascript-6">
  import { defineComponent,ref } from "vue";
  import { apiUpdateName } from '../../api/index'
  import { ElMessage } from 'element-plus'
  import PubSub  from 'pubsub-js'

  export default defineComponent({
        name:"UpdateUserName",
        setup(){
            let name = ref('')
            
        
            async function onSubmit(){
                let user_id = JSON.parse(window.sessionStorage.getItem('info')).id
                if ( ! name.value.trim() ) return
                let result = await apiUpdateName(user_id,name.value)
                if (result.err_code == 200 ){
                    //发布修改名字事件
                    PubSub.publish('mySubScriber',name.value)
                    name.value = ''
                    ElMessage.success({
                        message: '修改成功!',
                        type: 'success'
                    });
                    return
                }
                ElMessage.error(result.message)
               
            }
            return {
                name,
                onSubmit
            }
        }
  })
</script>

<style scoped lang="less" >
.container-box{
    margin: 15px auto;
    width: 90%;
    .el-form{
        width: 100%;

        .save-btn{
            text-align: center;
            /deep/ .el-form-item__content{
                margin: 0px !important;

            }
            .el-button{
                width: 60%;
            }
        }
    }
}
</style>
